<template>
  <div class="join-us-page">
    <Header />
    <main class="page-content">
      <div class="container">
        <div v-if="loading" class="loading"></div>
        <div v-else-if="error" class="error">{{ error }}</div>
        <div v-else class="join-us-content" v-html="content"></div>
      </div>
    </main>
    <Footer />
  </div>
</template>

<script>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'
import { getJoinUs } from '@/utils/api'

export default {
  name: 'JoinUs',
  components: {
    Header,
    Footer
  },
  data() {
    return {
      content: '',
      loading: false,
      error: null
    }
  },
  async mounted() {
    await this.fetchJoinUs()
  },
  methods: {
    /**
     * 获取Join Us数据
     */
    async fetchJoinUs() {
      this.loading = true
      this.error = null
      try {
        const data = await getJoinUs()
        this.content = data.content || ''
      } catch (error) {
        console.error('获取Join Us数据失败:', error)
        this.error = error.message || '获取内容失败'
        this.content = ''
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
/* Override container width for this page only */
.join-us-page .container {
  max-width: 1200px;
  padding-top: 20px;
}

.loading {
  text-align: center;
  padding: 60px 0;
  color: #666;
  font-size: 1.1em;
}

.error {
  text-align: center;
  padding: 60px 0;
  color: #e74c3c;
  font-size: 1.1em;
}

.join-us-content {
  color: var(--text-color);
  line-height: 1.8;
}

.join-us-content :deep(p) {
  margin-bottom: 15px;
  font-size: 1em;
}

.join-us-content :deep(p:last-child) {
  margin-bottom: 0;
}

.join-us-content :deep(h1),
.join-us-content :deep(h2),
.join-us-content :deep(h3),
.join-us-content :deep(h4),
.join-us-content :deep(h5),
.join-us-content :deep(h6) {
  color: var(--secondary-color);
  margin-top: 30px;
  margin-bottom: 15px;
  font-weight: 600;
}

.join-us-content :deep(h1) {
  font-size: 2em;
}

.join-us-content :deep(h2) {
  font-size: 1.8em;
}

.join-us-content :deep(h3) {
  font-size: 1.5em;
}

.join-us-content :deep(ul),
.join-us-content :deep(ol) {
  margin: 15px 0;
  padding-left: 30px;
}

.join-us-content :deep(li) {
  margin-bottom: 8px;
}

.join-us-content :deep(a) {
  color: var(--primary-color);
  text-decoration: none;
}

.join-us-content :deep(a:hover) {
  text-decoration: underline;
}

.join-us-content :deep(img) {
  max-width: 100%;
  height: auto;
  margin: 20px 0;
}

.join-us-content :deep(strong),
.join-us-content :deep(b) {
  font-weight: 600;
  color: var(--secondary-color);
}

.join-us-content :deep(em),
.join-us-content :deep(i) {
  font-style: italic;
}

.join-us-content :deep(blockquote) {
  border-left: 4px solid var(--primary-color);
  padding-left: 20px;
  margin: 20px 0;
  color: #666;
  font-style: italic;
}

.join-us-content :deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.join-us-content :deep(table th),
.join-us-content :deep(table td) {
  padding: 10px;
  border: 1px solid var(--border-color);
}

.join-us-content :deep(table th) {
  background-color: var(--light-gray);
  font-weight: 600;
}
</style>

